<!DOCTYPE html>
<html>
<head>
  <!-- Standard Meta -->
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

  <!-- Site Properties -->
  <title>homepage</title>
  <link rel="stylesheet" type="text/css" href="css/semantic.min.css">
  <link rel="stylesheet" href="css/index.css">
  <style>

  </style>

  <script src="js/jquery.min.js"></script>
  <script src="js/semantic.min.js"></script>
  <script src="js/index.js"></script>
</head>
<body>

<!-- Following Menu -->
<div class="ui  top fixed hidden menu">
  <div class="ui container">
    <a class="active item">网站名称</a>
    <a class="item">生活圈</a>
    <a class="item">个人中心</a>
    <div class="right menu">
      <div class="item">
        <a class="ui button">登陆</a>
      </div>
    </div>
  </div>
</div>

<!-- Sidebar Menu -->
<div class="ui vertical inverted sidebar menu">
  <a class="active item">网站名称</a>
  <a class="item">生活圈</a>
  <a class="item">个人中心</a>
  <a class="item">登录</a>
</div>


<!-- Page Contents -->
<div class="pusher">

  <div class="mainhead secondary ui inverted vertical masthead center aligned segment" style="background-image:url('resource/image/bg2.jpg');background-position: 20% 0;">

    <div class="ui container">
      <div class="ui large secondary inverted pointing menu">
        <a class="toc item">
          <i class="sidebar icon"></i>
        </a>
        <a class="active item">网站名称</a>
        <a class="item">生活圈</a>
        <a class="item">个人中心</a>
        <div class="right item">
          <a class="ui inverted button">登录</a>
          <div class="ui inverted  vertical animated button" tabindex="0">
            <div class="hidden content">注册</div>
            <div class="visible content">
              <i class="user plus icon"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="ui text container">
      <h1 class="ui inverted header">
        商场名称
      </h1>
      <h2>标语 1 2 3 4 5 6 7 </h2>
      <div class="ui huge primary button">点击进入<i class="right arrow icon"></i></div>
    </div>

  </div>

  <h1 class="ui center aligned header" style="margin-top:40px;">入驻品牌</h1>
  <div class="ui three column doubling stackable grid container">
    <div class="column">
      <div class="ui segment">brand</div>
    </div>
    <div class="column">
      <div class="ui segment">brand</div>
    </div>
    <div class="column">
      <div class="ui segment">brand</div>
    </div>
    <div class="column">
      <div class="ui segment">brand</div>
    </div>
    <div class="column">
      <div class="ui segment">brand</div>
    </div>
    <div class="column">
      <div class="ui segment">brand</div>
    </div>
  </div>


  <div class="ui vertical stripe segment">
    <div class="ui middle aligned stackable grid container">
      <div class="row">
        <div class="eight wide column">
          <h3 class="ui header">商城地址</h3>
          <p>
            bababababbabababbababbabab
            xbaskxbajks
          </p>

        </div>

        <div class="eight wide right floated column">
          <div class="ui cube shape" id="bigmap" style="height:200px; width:500px;">

          </div>
        </div>
      </div>

    </div>

  </div>


  <div class="ui vertical stripe quote segment">
    <div class="ui equal width stackable internally celled grid">
      <div class="center aligned row">
        <div class="column">
          <h3>"大家好我叫评论1"</h3>
          <p>
            <img src="resource/image/helen.jpg" class="ui avatar image"> <strong>用户名1</strong> -2019/1/1
          </p>
        </div>
        <div class="column">
          <h3>"大家好我叫评论2"</h3>
          <p>
            <img src="resource/image/jenny.jpg" class="ui avatar image"> <strong>用户名2</strong> -2019/1/1
          </p>
        </div>
        <div class="column">
          <h3>"大家好我叫评论3"</h3>
          <p>
            <img src="resource/image/justen.jpg" class="ui avatar image"> <strong>用户名2</strong> -2019/1/1
          </p>
        </div>
      </div>
    </div>
  </div>

  <div class="ui vertical stripe segment">
    <div class="ui text container">
      <h3 class="ui header">最近发生的事情1</h3>
      <p>xasxasjpoxjaspjxapsjx;lajxlkasjxlkajslkxjaslkxjaslxjsa</p>
      <a class="ui small teal button">了解更多</a>
      <h4 class="ui horizontal header divider">
         <i class="calendar alternate outline icon"></i>update on 2019/2/5
      </h4>
      <h3 class="ui header">最近发生的事情2</h3>
      <p>xasxasjpoxjaspjxapsjx;lajxlkasjxlkajslkxjaslkxjaslxjsa</p>
      <a class="ui small teal button">了解更多</a>
    </div>
  </div>




  <div class="ui inverted vertical footer segment">
    <div class="ui container ">
      <div class="ui stackable inverted divided equal height stackable grid">
        <div class="three wide column">
          <h4 class="ui inverted header">关于</h4>
          <div class="ui inverted link list animated">
            <a href="#" class="item">链接1</a>
            <a href="#" class="item">链接2</a>
            <a href="#" class="item">链接3</a>
            <a href="#" class="item">链接4</a>

          </div>
        </div>
        <div class="three wide column">
          <h4 class="ui inverted header">服务</h4>
          <div class="ui inverted link list animated">
            <a href="#" class="item">条目1----1</a>
            <a href="#" class="item">条目1----1</a>
            <a href="#" class="item">条目1----1</a>
            <a href="#" class="item">条目1----1</a>

          </div>
        </div>
        <div class="six wide column">
          <h4 class="ui inverted header">Main Footer</h4>
          <p>Extra space for a call to action inside the footer that could help re-engage users.
            各种标示信息，审计号码什么的。
          </p>
        </div>
        <div class="two wide column">
          <h4 class="ui inverted header">联系方式</h4>
          <div class="ui horizontal inverted list">
            <a href="" class="item"><i class="weibo icon"></i></a>
            <a href="" class="item"><i class="qq icon"></i></a>
            <a href="" class="item"><i class="wechat icon"></i></a>
            <a href="" class="item"><i class="mail icon"></i></a>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.12&key=67c825847015790206132608eac5e647"></script>
<script>
  //初始化地图
  var map = new AMap.Map('bigmap', {
    resizeEnable: true, //是否监控地图容器尺寸变化
    mapStyle: "amap://styles/fresh"
  });


</script>
</body>

</html>
